<template>
    <div class="scroll-tabs-container">
      <div class="tabs-scroll" ref="scrollWrapper">
        <div class="tab" 
             v-for="tab in tabs" 
             :key="tab.path"
             :class="{ active: tab.path === $route.path }"
             @click="handleClick(tab)"
             @contextmenu.prevent="openContextMenu(tab, $event)">
          <router-link :to="tab.path" class="tab-link" >{{ tab.meta.title }}</router-link>
        </div>
      </div>
      <ul v-if="contextMenuVisible" class="context-menu" :style="{ top: contextMenuPos.y + 'px', left: contextMenuPos.x + 'px' }">
        <li @click="closeTab(contextTab)">关闭</li>
        <li @click="closeOthers(contextTab)">关闭其它</li>
        <li @click="closeAll">关闭全部</li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ScrollTabs',
    data() {
      return {
        tabs: [
          { path: '/homePage', meta: { title: '首页' } }
        ],
        contextMenuVisible: false,
        contextMenuPos: { x: 0, y: 0 },
        contextTab: null
      }
    },
    watch: {
      $route(to) {
        if (!this.tabs.find(tab => tab.path === to.path)) {
          this.tabs.push({ path: to.path, meta: to.meta })
        }
      }
    },
    methods: {
      handleClick(tab) {
        if (this.$route.path !== tab.path) {
            this.$router.push(tab.path)
        }
      },
      openContextMenu(tab, event) {
        this.contextTab = tab
        this.contextMenuPos = { x: event.clientX, y: event.clientY }
        this.contextMenuVisible = true
        document.addEventListener('click', this.closeContextMenu)
      },
      closeContextMenu() {
        this.contextMenuVisible = false
        document.removeEventListener('click', this.closeContextMenu)
      },
      closeTab(tab) {
        this.tabs = this.tabs.filter(t => t.path !== tab.path)
        if (this.$route.path === tab.path) {
          const next = this.tabs[this.tabs.length - 1]
          if (next) this.$router.push(next.path)
        }
        this.contextMenuVisible = false
      },
      closeOthers(tab) {
        this.tabs = [tab]
        this.$router.push(tab.path)
        this.contextMenuVisible = false
      },
      closeAll() {
        this.tabs = [{ path: '/homePage', meta: { title: '首页' } }]
        this.$router.push('/homePage')
        this.contextMenuVisible = false
      }
    }
  }
  </script>
  
  <style scoped>
  .scroll-tabs-container {
    background: #f5f5f5;
    padding: 5px;
    border-bottom: 1px solid #ddd;
  }
  .tabs-scroll {
    display: flex;
    overflow-x: auto;
    gap: 8px;
  }
  .tab {
    background: #fff;
    padding: 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
  }
  .tab.active {
    background-color: #409EFF;
    color: #fff;
  }
  .context-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 999;
  }
  .context-menu li {
    padding: 5px 20px;
    cursor: pointer;
  }
  .context-menu li:hover {
    background: #eee;
  }
  .tab-link {
  text-decoration: none;
  color: inherit;
}
  </style>
  